#{extends 'main.html' /} #{set title:'Community Connect | My Organizations' /} #{set 'moreStyles'}
<link rel="stylesheet" href="@{'/public/stylesheets/forms.css'}">
<link rel="stylesheet" href="@{'/public/stylesheets/inettuts.css'}">
<link rel="stylesheet" href="@{'/public/stylesheets/inettuts.js.css'}">
<link rel="stylesheet" href="@{'/public/stylesheets/list.css'}">
<link rel="stylesheet" href="@{'/public/stylesheets/tables.css'}">
#{/set} #{set 'moreScripts'} 


<script src="@{'/public/javascripts/jquery-latest.js'}" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
	$(function() {		
		$("#allOrg").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#joinedOrg").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#subOrg").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#myOrg").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
		$("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});
	});	
	</script>


#{/set}

<div id=main>
<script src="@{'/public/javascripts/jquery.tablesorter.js'}" type="text/javascript" charset="utf-8"></script>
<br>
<br>

	<h1 align="left">All Organizations</h1>


	<div id="columns">

		<ul id="column1" class="column">

			<li class="widget color-blue">
				<div class="widget-head">
					<h3>All Organizations</h3>
				</div>
				<div class="widget-content">

					<table id="allOrg" class="tablesorter" cellpadding="8">
					<thead>
						<tr>
							<th><u>Organization Name</u></th>
							<th><u>Type</u></th>
							<th><u>Leader</u></th>
						</tr>
</thead>
<tbody>
						#{list items:organizationList, as:'Organization'}

						<tr>
							<td>${Organization.name}</td>
							<td>${Organization.type}</td>
							<td>${Organization.lead.name}</td>
							<td><a href="@{Organizations.showOrganization(Organization.id)}">Show</a></td>
						</tr>
		#{/list} #{else} You are not a member or subscribed in any
		organization#{/else}
</tbody>
</table>
	</div>
	
	</li>
	
	<li class="widget color-red">
				<div class="widget-head">
					<h3>Subscribed Organizations</h3>
				</div>
				<div class="widget-content">

					<table id=subOrg  class="tablesorter" cellpadding="8">
						<thead>
						<tr>
							<th><u>Organization Name</u></th>
							<th><u>Type</u></th>
							<th><u>Leader</u></th>
						</tr>
</thead>
<tbody>
						#{list items:subscribed, as:'Organization'}

						<tr>
							<td>${Organization.name}</td>
							<td>${Organization.type}</td>
							<td>${Organization.lead.name}</td>
							<td><a href="@{Organizations.showOrganization(Organization.id)}">Show</a></td>
						</tr>
		#{/list} #{else} You are not a member or subscribed in any
		organization#{/else}
</tbody>
</table>
	</div></li>
	
	
	
	</ul>

	<ul id="column2" class="column">
		<li class="widget color-orange">
			<div class="widget-head">
				<h3>Joined Organization</h3>
			</div>
			<div class="widget-content">
				<table id="joinedOrg"  class="tablesorter" cellpadding="8">
				<thead>
						<tr>
							<th><u>Organization Name</u></th>
							<th><u>Type</u></th>
							<th><u>Leader</u></th>
						</tr>
</thead><tbody>
						#{list items:joined, as:'Organization'}

						<tr>
							<td>${Organization.name}</td>
							<td>${Organization.type}</td>
							<td>${Organization.lead.name}</td>
							<td><a href="@{Organizations.showOrganization(Organization.id)}">Show</a></td>
						</tr>
						#{/list} #{else} You are not a member or subscribed in any
						organization#{/else}
</tbody>
</table>
			</div></li>
			
			
			<li class="widget color-green">
			<div class="widget-head">
				<h3>My Organizations</h3>
			</div>
			<div class="widget-content">
				<table id="myOrg" cellpadding="8" class="tablesorter"  align="center">
						<thead>
						
						<tr>
							<th><u> Name</u></th>
							<th><u>Type</u></th>
							<th><u>Category</u></th>
							<th><u>Members</u></th>
						</tr>
</thead><tbody>
						#{list items:userOrganizations, as:'Organization'}

						<tr>
							<td>${Organization.name}</td>
							<td>${Organization.type}</td>
							<td>${Organization.category}</td>
							<td align="center">${Organization.orgMembers.size()}</td>
							<td><a href="@{Organizations.showOrganization(Organization.id)}">Show</a></td>
						</tr>
						#{/list} 
						#{else} You didn't create any Organizations, 
						<a href="@{Organizations.createOrganization()}">Create?</a>
						#{/else}
</tbody>
</table>
			</div></li>

	</ul>

</div>
<div style="clear:both;"></div>
</div>




<script src="@{'/public/javascripts/Organization/jquery-ui-personalized-1.6rc2.min.js'}" type="text/javascript" charset="utf-8"></script>
<script src="@{'/public/javascripts/Organization/inettuts.js'}" type="text/javascript" charset="utf-8"></script>




